<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 2px solid #ccc; display: block;margin: 50px auto;">
			
		</canvas>
	</body>
	<script>
			window.onload = function(){
				//lineWidth线条的宽度
				//lineCap线条两端的形状
				//默认butt(无) round  square
			var canvas = document.getElementById("canvas");
			canvas.width =800;
	        canvas.height =880;
	    var context = canvas.getContext("2d");//2d环境
	        //背景为黑色
	        context.fillStyle="black";
	        context.fillRect(0,0,canvas.width,canvas.height);
			 
	 context.lineWidth=5;//线条的宽度
	 context.strokeStyle="blue";//线的颜色
	 context.fillStyle="yellow";//填充色
   //画出200个任意星星
   for(var i=0;i<200;i++){
   	var R  = Math.random()*10+10;//10到20  Math.random() [0,1) 控制大小
   	//更符合实际
// 	var x = Math.random()*canvas.width;
// 	var y = Math.random()*canvas.height;

/*var x=Math.abs(Math.random()*canvas.width-2*R)+R;//abs() 方法可返回数的绝对值。
var y=Math.abs(Math.random()*canvas.height-2*R)+R;*/
   	
   	//都在画布中
    var x = Math.random() * (canvas.width - 2*R) + R;
    var y = Math.random() * (canvas.height - 2*R) + R;
    
   	var rot  = Math.random()*360;
    drawStar(context,R/2.0,R,x,y,rot);//当外圆的半径是內圆半径的2倍时是一个标准星星
   }


	function drawStar(cxt,r,R,x,y,rot){   //(环境，小圆半径，大圆半径，偏移量x,偏移量y， 旋转度)
	cxt.beginPath();
	for(var i=0; i<5; i++){//计算5个点
	cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
									 -Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
	 	cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
									 -Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
	}
	cxt.closePath();
	context.fill();
	cxt.stroke();
    }
    
    
		}
	</script>
</html>
